<script setup>
import { reactive, ref, watch, onUpdated, onMounted } from 'vue'
import { showMessage } from '../public/public';

const formLabelWidth = '100px'

//文案颜色以及按钮背景颜色切换
// 添加功能： 添加部门  / title-primary / "" / ""
// 编辑功能： 编辑部门  / title-dark / save-dark / cancel-dark
// 删除功能： 删除部门  / title-red / save-red / cancel-red
let sectortitle = ref('添加部门');
let sectortitleColor = ref('title-primary');
let savesectorcolor = ref('')
let cancelsectorcolor = ref('')
const dialogArray = [{
    type:'add-type',
    title:'添加部门',
    titleColor:'title-primary',
    savecolr:'',
    cancelColor:''
},{
    type:'edit-type',
    title:'编辑部门',
    titleColor:'title-dark',
    savecolr:'save-dark',
    cancelColor:'cancel-dark'
},{
    type:'delete-type',
    title:'删除部门',
    titleColor:'title-red',
    savecolr:'save-red',
    cancelColor:'cancel-red'
}];

const disabledInput = ref(false);
const props = defineProps({ currentData:{}, dialogFormVisible: {}, dialogType:{}})
const emits = defineEmits(["isShow", 'addNewData', 'editData', 'deleteData']);
const dFVisible = ref(props.dialogFormVisible);
const sectorData = reactive({});
const dType = ref(props.dialogType);


watch(() => [props.dialogFormVisible, props.dialogType, props.currentData], ([visableVal, typeVal, dataVal], [visablePreVal, typePreVal, dataPreVal]) => {
    dFVisible.value = visableVal;
    dType.value = typeVal;
    dialogArray.forEach(val =>{
        if(typeVal === val.type){
            sectortitle.value = val.title;
            sectortitleColor.value = val.titleColor;
            savesectorcolor.value = val.savecolr;
            cancelsectorcolor.value = val.cancelColor;
        }
    })
    //侦听sectorData数据 第一次出现对话框（visableVal 为true）将父组件传过来的值给子组件，当子组件不显示后这里不能侦听之前父组件传过来的数据, 否则总是将老值（之前的数据）赋值给 响应式数据sectorData
    if(visableVal){
        sectorData.sectorId = dataVal.sectorId;
        sectorData.sectorName = dataVal.sectorName;
    }

    if(typeVal === 'delete-type'){
        //删除功能  输入框禁用
        disabledInput.value = true;
    }else{
        //添加、编辑功能  输入框不禁用
        disabledInput.value = false;
    }
})

// 取消按钮
function cancel() {
    sectorData.sectorName = '';
    dFVisible.value = false;
    emits("isShow", false);
}

//确认按钮
function save() {
    dFVisible.value = false;
    emits("isShow", false);
    if (dType.value === 'add-type') {
        if (sectorData.sectorName.length === 0) {
            showMessage('请添加部门名称后点击确认', 'error', 2000);
            return;
        }
        emits("addNewData", sectorData);
    }else if(dType.value === 'edit-type'){
        if(!sectorData.sectorName.length) return;
        emits('editData', sectorData);
    }else if(dType.value === 'delete-type'){
        emits('deleteData', sectorData);
    }
}
// 点击空白，点击右上角x，按键盘esc键
function close() {
    sectorData.sectorName = '';
    emits("isShow", false);
}


</script>

<template>
    <el-dialog v-model="dFVisible" :title="sectortitle" :before-close="close" :class="sectortitleColor" style="width:400px;">
        <el-form :model="sectorData">
            <el-form-item label="部门名称" :label-width="formLabelWidth">
                <el-input v-model="sectorData.sectorName" autocomplete="off" :disabled="disabledInput"/>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="save" :class="savesectorcolor">确认</el-button>
                <el-button @click="cancel" :class="cancelsectorcolor">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>

<style scoped>
.el-input {
    width: 230px;
}
.dialog-footer button:first-child {
    margin-right: 20px;
}
.dialog-footer button:last-child {
    margin-right: 20px;
}

</style>



<style>
.el-form-item__label{
    margin-left: -20px;
}

.title-primary .el-dialog__header .el-dialog__title{
    color: var(--el-color-primary);
}
.title-dark .el-dialog__header .el-dialog__title{
    color: #555;
}
.title-red .el-dialog__header .el-dialog__title{
    color: #fb4746;
}

.save-dark{
    background-color: #555;
    border: 1px solid #555;
}
.save-dark:hover, .save-dark:active, .save-dark:visited, .save-dark:focus{
    background-color: #999;
    border: 1px solid #999;
}

.save-red{
    background-color: #c33;
    border: 1px solid #c33;
}
.save-red:hover, .save-red:active, .save-red:visited, .save-red:focus{
    background-color: #a55;
    border: 1px solid #a55;
}

.cancel-dark:hover, .save-dark:active, .save-dark:visited, .save-dark:focus{
    background-color: var(--vt-c-divider-light-2);
    border: 1px solid var(--vt-c-divider-light-2);
    color: #999;
} 
.cancel-red:hover, .save-red:active, .save-red:visited, .save-red:focus{
    background-color: var(--vt-c-divider-light-2);
    border: 1px solid var(--vt-c-divider-light-2);
    color: #999;
} 

</style>